// 登录
<template>
  <div class="login-module">
    <h2>登录</h2>
    <router-view></router-view>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="ruleForm.account"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="auth">
        <el-input v-model.number="ruleForm.auth">
          <el-button slot="append" @click="getCaptcha()"
            >点击获取验证码</el-button
          >
        </el-input>
      </el-form-item>

      <el-button
        class="login-btn"
        type="primary"
        @click="submitForm('ruleForm')"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    var validateAccount = (rule, value, callback) => {
      // const pat = /^\w{3,11}$/i;
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
      // if (pat.test(value)) {
      //   callback();
      // } else {
      //   callback(new Error("请输入 3 到 11 位的账号"));
      // }
    };

    var validatePass = (rule, value, callback) => {
      // 验证非法字符
      const pat = /[`~@#$%^&*()+<>?"{},;'[\]]/im;
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      if (pat.test(value)) {
        callback(new Error("密码包含非法字符"));
      } else {
        callback();
      }
    };

    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      ruleForm: {
        account: "",
        pass: "",
        auth: "",
      },
      rules: {
        account: [
          { validator: validateAccount, trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "请输入 3 到 11 位的账号",
            trigger: "blur",
          },
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        auth: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapActions(["userStore/loginAction", "userStore/captchaAction"]),
    // 验证码请求
    getCaptcha() {
      console.log(this.ruleForm.account);
      this["userStore/captchaAction"]({
        phone: this.ruleForm.account,
      });
      // .then(
      //   (res) => {
      //     console.log(res);
      //   },
      //   (err) => {
      //     console.log(err);
      //   }
      // );
    },
    // 当我们点击提交按钮时触发
    submitForm(formName) {
      // validate 对整个表单进行校验的方法，参数为一个回调函数。
      // 该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
      // 若不传入回调函数，则会返回一个 promise
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 登录请求
          this["userStore/loginAction"]({
            // userId: 1,
            // token: "arereafasereafse",
            // username: this.ruleForm.account,
            username: this.ruleForm.account, // 电话号码
            password: this.ruleForm.pass, // 密码
            captcha: this.ruleForm.auth, // 验证码
          }).then(
            () => {
              // 重定向到首页
              this.$router.push("/");
            },
            (err) => {
              console.log("登录请求失败：" + err);
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-module {
  width: 500px;
  height: 340px;
  background-color: #fff;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.3);

  margin: 15% auto 0;
  text-align: center;

  h2 {
    padding: 25px 0;
  }
  .demo-ruleForm {
    .el-form-item {
      padding-right: 35px;
    }
    .login-btn {
      margin: 3px 0;
      // width: 85%;
    }
  }
}
</style>